<template>
    <div class="analysis-tab-wrap">
        <div style="padding: 24px; background: #fff">
            <flexbox>
                <div>产品分析完成度：</div>
                <flexbox-item>
                    <a-progress :percent="completeness" />
                </flexbox-item>
            </flexbox>
        </div>
        <template v-for="(item, index) of allComps" :key="index">
            <component :is="item.comName" :detail="detail" :disabled="disabled" @success="handleSuccess" />
        </template>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import RelativeMarket from './RelativeMarket/index.vue';
import RelativeRule from './RelativeRule/index.vue';
import RelativeGood from './RelativeGood/index.vue';
import { message } from 'ant-design-vue';
import { defineComponent, ref, unref, computed, getCurrentInstance } from 'vue';
export default defineComponent({
    name: 'AnalysisTab',
    components: {
        RelativeRule,
        RelativeGood,
        RelativeMarket
    },
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const instance: any = getCurrentInstance();
        const allComps = [{ comName: 'RelativeRule' }, { comName: 'RelativeGood' }, { comName: 'RelativeMarket' }];
        const completeness = ref<number>(0);
        const disabled = computed(() => {
            return !instance.proxy.userInfo.roles.includes('产品经理');
        });
        // 计算各模块完成度
        const getCompleteness = (data) => {
            let newCompleteness = 0;
            // 计算文件占比
            const checkFilePercent = (list) => {
                const target = list.find(({ type }) => type === 'uploadFile');
                return target?.value.length ? 20 : 0;
            };
            // 计算文本框占比
            const checkTextPercent = (list) => {
                const doneNum = list.filter(({ value, type }) => value && type === 'text').length;
                const totalNum = list.filter(({ type }) => type === 'text').length;
                const percent = doneNum / totalNum;
                return percent * 0.2 * 100;
            };

            const { delicacyCanvas, contendCanvas, strategyCanvas, files } = data;
            // 精益画布
            if (contendCanvas) {
                const list = JSON.parse(contendCanvas);
                const textPercent = checkTextPercent(list);
                newCompleteness += ~~textPercent;
                console.log('精益:', textPercent);
            }
            // 战略画布
            console.log(JSON.parse(strategyCanvas));
            if (JSON.parse(strategyCanvas) && JSON.parse(strategyCanvas).length) {
                newCompleteness += 20;
                console.log('战略:', 20);
            }
            // 竞品画布
            if (delicacyCanvas) {
                const list = JSON.parse(delicacyCanvas);
                const textPercent = checkTextPercent(list);
                const filePercent = checkFilePercent(list);
                newCompleteness += ~~textPercent + filePercent;
                console.log('竞品:', ~~textPercent + filePercent);
            }
            // 市场分析文档
            if (files && files.length) {
                newCompleteness += 20;
                console.log('文档', 20);
            }
            completeness.value = newCompleteness;
        };
        const handleSuccess = ({ query }) => {
            getCompleteness({
                ...props.detail,
                ...query
            });
            handleSave(query);
        };
        const handleSave = async (defaultQuery) => {
            const query = {
                ...props.detail,
                ...defaultQuery,
                completeness: unref(completeness)
            };
            const { success, errorMsg } = await api.productDetailModel.save(query);
            if (success) {
                message.success('保存成功');
            } else {
                message.error(errorMsg);
            }
        };
        completeness.value = +props.detail.completeness || 0;
        return {
            allComps,
            completeness,
            disabled,
            handleSuccess
        };
    }
});
</script>
<style scoped lang="less">
.analysis-tab-wrap {
    padding: 24px 0 0 0;
    background: #f0f2f5;
}
</style>